<template>
    <div class="in">
        <div class="w1">
            <p>草稿箱</p>
            <p @click="close">X</p>
        </div>
        <div class="w2">
            <span class="tr" v-for="i in Post_picture" :key="i" @click="itch(i)" :style="[{color: name == i?'#00c3ff':''},{borderBottom: name == i?'3px solid #00c3ff':''}]">{{i}}</span>
        </div>
        <div class="w3">
            <Pictur :Tr_data1="Transmit_data1"></Pictur>
        </div>
        <div class="w4">~已经到底啦~</div>
    </div>
</template>

<script>
import Pictur from './Picture.vue'
export default {
    components: {Pictur},
    data(){
        return {
            name: '帖子',
            Post_picture: ['帖子', '图片'],
            Transmit_data1: null,
            data1: [
                {
                    id: 1,
                    img: 'https://upload-bbs.mihoyo.com/upload/2022/05/11/75379477/814b48cc0c8b409159d1c6144cb0bac8_6416092174768329148.png',
                    title: '1212',
                    txtTil: '降低vi哦分是女方vi地方v四点vi覅是发票1i的覅哦覅是大部分比赛封闭',
                    time: '编辑于3小时前'
                },
                {
                    id: 2,
                    img: 'https://upload-bbs.mihoyo.com/upload/2022/05/10/75379477/c6147a0ddd3540c40a131c8c6333aacf_8868892579676862653.jpg',
                    title: '1212',
                    txtTil: '降低vi哦分是女方vi地方v四点vi覅是发票1i的覅哦覅是大部分比赛封闭',
                    time: '编辑于3小时前'
                }
            ],
            data2: [
                {
                    id: 1,
                    img: 'https://upload-bbs.mihoyo.com/upload/2022/05/10/75379477/c6147a0ddd3540c40a131c8c6333aacf_8868892579676862653.jpg',
                    title: '',
                    txtTil: '',
                    time: '编辑于3小时前'
                },
                {
                    id: 2,
                    img: '',
                    title: '1212',
                    txtTil: '降低vi哦分是女方vi地方v四点vi覅是发票1i的覅哦覅是大部分比赛封闭',
                    time: '编辑于3小时前'
                }
            ]
        }
    },
    mounted() {
        this.ChuanShen()
    },
    methods: {
        close() {
            this.$emit('closel', false)
        },
        ChuanShen() {
            this.Transmit_data1 = this.data1
        },
        itch(i) {
            this.name = i
            if(i === '帖子') {
                this.Transmit_data1 = this.data1
            }else {
                this.Transmit_data1 = this.data2
            }
        }
    }
}
</script>

<style lang="less" scoped>
    .in {
        border-radius: 10px;
        width: 600px;
        height: 600px;
        background-color: white;
        .w1 {
            border-bottom: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
            p {
                font-weight: bolder;
                margin-left: 20px;
            }
            p:nth-last-child(1) {
                margin-right: 20px;
                color: #999;
                cursor: pointer;
            }
        }
        .w2 {
            border-bottom: 1px solid #ccc;
            margin-left: 28px;
            width: 90%;
            display: flex;
            justify-content: center;
            span {
                padding: 10px;
                cursor: pointer;
            }
        }
        .w3 {
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
            // margin-top: 10px;
            margin-left: 13.5px;
            width: 95%;
            display: flex;
            justify-content: space-between;
        }
        .w4 {
            // border: 1px solid red;
            padding: 10px;
            text-align: center;
            color: #999;
        }
    }
</style>